<template>
  <div class="index" v-loading.fullscreen.lock="bodyloading">
    <div class="main">
      <div @click="tolist(1)">
        <s>*</s>
        <p class="tit">门店名称：</p>
        <p>{{ queryform.mdname }}</p>
        <van-icon name="arrow" class="icon" />
      </div>
      <div>
        <p class="tit">门店编码：</p>
        <p>{{ queryform.mdcode }}</p>
      </div>
      <div>
        <p class="tit">小微：</p>
        <p>{{ queryform.xwname }}</p>
      </div>
      <div>
        <p class="tit">渠道：</p>
        <p>{{ queryform.qdname }}</p>
      </div>
      <div @click="tolist(2)">
        <s>*</s>
        <p class="tit">产业：</p>
        <p>{{ queryform.cyname }}</p>
        <van-icon name="arrow" class="icon" />
      </div>
      <div @click="tolist(3)">
        <s>*</s>
        <p class="tit">活动主题：</p>
        <p>{{ queryform.ztname }}</p>
        <van-icon name="arrow" class="icon" />
      </div>
    </div>

    <div class="qs" v-if="pitlist.length == 0">
      <p v-if="queryform.ztcode == ''">请先依次选择门店/产业/主题</p>
      <p v-else>该主题没有物料,请重新选择</p>
    </div>

    <div class="prdlist" v-else>
      <div v-for="item in pitlist" :key="item.modelCode">
        <div class="top">
          <van-checkbox v-model="item.checked" @click="pitclick"></van-checkbox>
          <div class="img">
            <img :src="item.picAddr" alt="" />
          </div>
          <div class="text">
            <p class="tit">{{ item.modelName }}</p>
            <p class="code">{{ item.modelCode }}</p>
            <p class="desc">物料描述：{{ item.modelDis }}</p>
          </div>
        </div>
        <div class="bottom" v-show="item.checked">
          <p>申请数量</p>
          <el-input-number
            v-model="item.number"
            :precision="0"
            :min="1"
            :step="1"
          ></el-input-number>
        </div>
      </div>
    </div>
    <div class="btnbox">
      <p class="waring">*注：提交前请确认必填项都已填写，所需物料都已提报</p>
      <p class="sum">已选 {{ queryform.list.length }}</p>
      <van-button type="info" @click="next">下一步</van-button>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { shopDetails, materialApplyMaterialInfo } from "../../api/app.js";
export default {
  name: "Index",
  components: {},

  data() {
    return {
      header: {
        show: true,
        return: true,
        search: false,
        title: "营销物料需求提报",
        home: "/index",
        close: true,
      },
      queryform: {
        mdcode: "",
        mdname: "",
        xwcode: "",
        xwname: "",
        cdepcode: "",
        cdepname: "",
        qdcode: "",
        qdname: "",
        cycode: "",
        cyname: "",
        ztcode: "",
        ztname: "",
        list: [],
        address: "",
      },
      tradeCode: "",
      bodyloading: false,
      isHome: false,
      params: this.$route.params,
      pitlist: [],
      number: 0,
      applyId: this.$route.query.applyId ? this.$route.query.applyId : "",
    };
  },
  computed: {
    ...mapState({
      selectOptions: (state) => state.selectOption.selectOptions,
      selectCustomer: (state) => state.selectOption.selectCustomer,
      selectBrand: (state) => state.selectOption.selectBrand,
    }),
  },
  created() {
    // console.log(this.selectOptions,this.selectCustomer,this.selectBrand);
    if (this.$route.query.state == "002") {
      if (this.selectOptions !== null) {
        const selectOption = this.selectOptions;
        // console.log(selectOption);
        this.handleBackData(selectOption.selectFlag, selectOption);
      }
      if (this.selectCustomer !== null) {
        const selectCustomer = this.selectCustomer;
        // console.log(selectCustomer);
        this.handleBackData(selectCustomer.selectFlag, selectCustomer);
        this.queryform.ztname = "";
        this.queryform.ztcode = "";
      }
      if (this.selectBrand !== null) {
        const selectBrand = this.selectBrand;
        // console.log(selectBrand);
        this.handleBackData(selectBrand.selectFlag, selectBrand);
      }
    }
    // else if(this.$route.query.state == "003"){
    //   this.getdetail()
    // }
  },
  mounted() {},
  activated() {},
  methods: {
    tolist(state) {
      if (this.applyId) {
        this.$toast("不允修改门店产业和主题");
        return false;
      } else {
        let cycode = this.queryform.cycode;
        let xwcode = this.queryform.xwcode;
        let qdcode = this.queryform.qdcode;
        let mdcode = this.queryform.mdcode;
        if (cycode == "" && state == 3) {
          this.$toast("请选择产业");
        } else if (xwcode == "" && state == 3) {
          this.$toast("请选择有小微的门店");
        } else {
          this.$router.push({
            name: "list",
            query: {
              state: state,
              cycode: cycode,
              xwcode: xwcode,
              qdcode: qdcode,
              mdcode: mdcode
            },
          });
        }
      }
    },
    //根据八码查小微渠道地址
    getxwqd(code, state) {
      let that = this;
      let json = {
        custCode: code,
      };
      this.bodyloading = true;
      shopDetails(json).then((res) => {
        // console.log(res);
        if (res.code == 200 && res.data != null) {
          this.queryform.xwname = res.data.tradeName;
          this.queryform.xwcode = res.data.tradeCode;
          this.queryform.cdepcode = res.data.cdepCode;
          this.queryform.cdepname = res.data.cdepName;
          this.tradeCode = res.data.tradeCode;
          this.queryform.qdname = res.data.channelName;
          this.queryform.qdcode = res.data.channelCode;
          this.queryform.address = res.data.address;
          if (state == 2) {
            that.getpitlist(this.queryform.ztcode, this.queryform.xwcode);
          }
        } else {
          this.queryform.xwname = "暂无，请重新选择";
          this.queryform.xwcode = "";
          this.queryform.qdname = "暂无，请重新选择";
          this.queryform.qdcode = "";
          this.queryform.cdepcode = "";
          this.queryform.cdepname = "";
        }
        this.bodyloading = false;
      });
    },
    handleBackData(selectFlag, selectOption) {
      if (selectFlag !== "") {
        switch (selectFlag) {
          case "1":
            this.queryform.mdname = selectOption.name;
            this.queryform.mdcode = selectOption.code;
            if (this.queryform.mdcode) {
              this.getxwqd(this.queryform.mdcode, 1);
            }
            break;
          case "2":
            // console.log(selectOption);
            this.queryform.cyname = selectOption.name;
            this.queryform.cycode = selectOption.code;
            break;
          case "3":
            // console.log(selectOption);
            this.queryform.ztname = selectOption.name;
            this.queryform.ztcode = selectOption.code;
            this.getxwqd(this.queryform.mdcode, 2);
            break;
        }
      }
    },
    //根据主题查物料
    async getpitlist(ztcode, xwcode) {
      // console.log(ztcode,xwcode)
      let that = this;
      let json = {
        basicCode: ztcode,
        tradeCode: xwcode,
      };
      // console.log(json);
      this.bodyloading = true;
      await materialApplyMaterialInfo(json).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          that.pitlist = res.data;
          that.bodyloading = false;
          // if (that.pitlist.length == 0 && that.queryform.ztcode != "") {
          //   that.$toast("没有查询到物料");
          // }
        }
      });
    },
    pitclick() {
      let that = this;
      this.queryform.list = [];
      this.pitlist.forEach((item) => {
        if (item.checked) {
          that.queryform.list.push(item);
        }
      });
    },
    next() {
      if (this.queryform.mdcode == "") {
        this.$toast("请先选择门店");
        return false;
      }
      // console.log(
      //   this.queryform.list.length,
      //   this.pitlist.length,
      //   this.queryform.ztcode
      // );
      if (this.queryform.ztcode == "") {
        this.$toast("请选择活动主题");
        return false;
      }
      if (this.pitlist.length == 0) {
        this.$toast("该主题没有物料,请重新选择");
        return false;
      } else {
        if (this.queryform.list.length == 0) {
          this.$toast("请至少选择一个物料");
          return false;
        }
      }
      // console.log(JSON.stringify(this.queryform));
      if (sessionStorage.getItem("indexlist")) {
        sessionStorage.removeItem("indexlist");
      }
      sessionStorage.setItem("indexlist", JSON.stringify(this.queryform));
      this.$router.push({
        name: "submit",
        query: {
          applyId: this.applyId,
          address: this.queryform.address,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.index {
  font-size: 0.14rem;
  > div {
    width: 95vw;
    margin: 0 auto;
    border-radius: 0.03rem;
    background-color: #fff;
    margin-bottom: 0.1rem;
  }
  .qs {
    height: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
    padding: 0.1rem;
    box-sizing: border-box;
  }
  .main {
    > div {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: relative;
      height: 0.4rem;
      padding: 0 0.15rem;
      box-sizing: border-box;
      s {
        text-decoration: none;
        color: red;
      }
      .icon {
        position: absolute;
        font-size: 0.14rem;
        position: absolute;
        right: 0.05rem;
      }
    }
  }
  .prdlist {
    background: none;
    > div {
      padding: 0.1rem;
      box-sizing: border-box;
      border-radius: 0.03rem;
      background-color: #fff;
      margin-bottom: 0.1rem;
      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        >>> .van-checkbox {
          width: 0.2rem;
          height: 0.2rem;
        }
        .img {
          width: 0.7rem;
          height: 0.7rem;
          img {
            width: 100%;
            height: 100%;
            display: flex;
          }
        }
        .text {
          width: 2.3rem;
          p {
            margin: 0;
          }
          .tit {
            color: #f40;
          }
          .code {
            color: #666;
            font-size: 0.12rem;
            margin: 0.05rem 0;
          }
          .desc {
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }
        }
      }
      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        p {
          margin: 0;
        }
        /deep/ .el-input-number {
          width: 1rem;
          height: 0.27rem;
          line-height: 0.25rem;
          .el-input-number__decrease {
            width: 0.25rem;
            box-sizing: border-box;
          }
          .el-input-number__increase {
            width: 0.25rem;
            box-sizing: border-box;
          }
          .el-input {
            font-size: 0.12rem;
            input {
              height: 0.27rem;
              line-height: 0.25rem;
              padding: 0;
              border-radius: 0;
              box-sizing: border-box;
            }
          }
        }
      }
    }
  }
  .btnbox {
    background: none;
    p {
      width: 100%;
    }
    .waring {
      font-size: 0.12rem;
      color: red;
    }
    .sum {
      text-align: right;
    }
    .van-button {
      width: 100%;
      display: block;
      height: 0.4rem;
      border-radius: 0.4rem;
      color: #fff;
      text-align: center;
      line-height: 0.4rem;
      margin-top: 0.05rem;
      background-color: #2698eb;
    }
  }
}
</style>
